<template>
    <section class="content">
        <el-col :span="24" class="breadcrumb">
          <el-col :span="20">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item ><a href="/#/projectList"  @click="projectDark">项目列表</a></el-breadcrumb-item>
                <el-breadcrumb-item>{{allocation.name}}</el-breadcrumb-item>
            </el-breadcrumb>
            </el-col>
             <el-col :span="4" class="userinfo" >
               <el-button type="primary" class="userinfoButton"  v-if="importData"  @click="importDataButton">导入人工数据</el-button>
             </el-col>
        </el-col>
        <div v-if="projectDiv">
          <el-col :span="24">
              <el-button type="primary" class="button-add" @click="projectAdd = true"><i class="el-icon-edit"></i>创建项目</el-button>
          </el-col>
          <el-col :span="24">
              <el-table :data="tableData" stripe highlight-current-row  class="table">
                  <el-table-column type="index" width="60"></el-table-column>
                      <!-- <el-table-column prop="id" label="id" width="60"> </el-table-column> -->
                      <el-table-column prop="name" label="名称"> </el-table-column>
                       <el-table-column prop="place" label="项目位置"> </el-table-column>
                      <el-table-column prop="status" label="实施单位"> </el-table-column>
                      <el-table-column prop="startTime" label="开始时间"   > </el-table-column>
                      <el-table-column prop="endTime" label="结束时间" > </el-table-column>
                      <el-table-column prop="member" label="合作期限"> </el-table-column>
                      <el-table-column prop="memberIds" label="目前进展"> </el-table-column>
                      <el-table-column prop="operation" label="操作" > 
                      <template slot-scope="scope">
                          <el-button  @click="deleteRow(scope.$index,scope.row)" type="text" size="small">移除</el-button>
                          <el-button   type="text"  @click="handleEdit(scope.$index, scope.row)" size="small">编辑</el-button>
                          <!-- <el-button   type="text"  @click="allocaTion(scope.$index, scope.row)"  size="small">配置</el-button> -->
                      </template>
                  </el-table-column>
              </el-table>
              <div class="block">
                  <span class="show-pager">显示总数</span>
                  <el-pagination
                    @current-change="handleCurrentChange"
                    @pre-click="handlePreClick"
                    @next-click="handleNextClick"
                    :current-page.sync="currentPage"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total= "totalRecord" >
                  </el-pagination>
                </div>
          </el-col>
          <el-dialog title="创建项目" :visible.sync="projectAdd" :modal='false' v-dialogDrag>
              <el-form :model="form"  >
                    <el-form-item :label-width="formLabelWidth" label="项目名称：">
                      <el-input v-model="form.name" placeholder="请输入项目名称" class="input-w-480"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="项目简介：">
                      <el-input type="textarea" :rows="3" v-model="form.brief" placeholder="请输入项目简介" class="input-w-480"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="实施单位：">
                      <el-input v-model="form.status" placeholder="请输入实施单位" class="input-w-480"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="项目类型：" :label-width="formLabelWidth">
                      <el-select v-model="form.projectType" clearable placeholder="请选择" @change="selectKey">
                          <el-option v-for="item in projectType" :key="item.id" :label="item.name" :value="item.id">
                          </el-option>
                      </el-select>
                    </el-form-item> -->
                    <el-form-item label="开始时间：" :label-width="formLabelWidth">
                        <el-date-picker  v-model="form.startTime"   type="date"   placeholder="选择开始日期"  format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"  class="input-w-220"></el-date-picker>
                  </el-form-item>
                  <el-form-item label=" 结束时间：" :label-width="formLabelWidth">
                          <el-date-picker  v-model="form.endTime"   type="date"   placeholder="选择结束日期"  format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"  class="input-w-220"></el-date-picker>
                  </el-form-item>
                  <el-form-item :label-width="formLabelWidth" label="合作期限：">
                      <el-input v-model="form.member" placeholder="请输入合作期限" class="input-w-480"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="目前进展：">
                      <el-input type="textarea" :rows="3" v-model="form.memberIds" placeholder="请输入目前进展" class="input-w-480"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="项目位置：">
                      <el-input v-model="form.place" placeholder="请输入项目位置" class="input-w-480"></el-input>
                    </el-form-item>
                      <el-form-item label="坐标:" :label-width="formLabelWidth">
                          <el-form-item label=" 经度：">
                              <el-input v-model="form.longitude" placeholder="经度"  class="input-w-220"></el-input>
                          </el-form-item>
                          <el-form-item label=" 纬度：">
                              <el-input v-model="form.latitude" placeholder="纬度"  class="input-w-220"></el-input>
                          </el-form-item>
                      </el-form-item>
                      </el-form>
                  <div slot="footer" class="">
                      <el-button @click="projectAdd = false">取消</el-button>
                      <el-button type="primary" @click="submitProjectAdd">确定</el-button>
                  </div>
          </el-dialog>

          <el-dialog title="项目编辑" :visible.sync="projectEdit" :modal='false' v-dialogDrag>
              <el-form :model="form"  >
                    <el-form-item :label-width="formLabelWidth" label="项目名称：">
                      <el-input v-model="form.name" :placeholder="form.name" class="input-w-480"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="项目简介：">
                      <el-input type="textarea" :rows="3" v-model="form.brief" :placeholder="form.brief" class="input-w-480"></el-input>
                    </el-form-item>
                  <el-form-item label="实施单位：" :label-width="formLabelWidth">
                      <!-- <el-select v-model="projectname" clearable :placeholder="projectname" >
                          <el-option v-for="item in projectStatus" :key="item.projectid" :value="item.projectname">
                          </el-option>
                      </el-select> -->
                      <el-input v-model="form.status" :placeholder="form.status" class="input-w-480"></el-input>
                    </el-form-item>
                   
                    <!-- <el-form-item label="项目类型：" :label-width="formLabelWidth">
                      <el-select v-model="form.projecttype" clearable :placeholder="projectType.name" @change="selectKey">
                          <el-option v-for="item in projectType" :key="item.id" :label="item.name" :value="item.id">
                          </el-option>
                      </el-select>
                    </el-form-item> -->
                    <el-form-item label="开始时间：" :label-width="formLabelWidth">
                        <el-date-picker  v-model="form.startTime"   type="date"   :placeholder="form.startTime"  format="yyyy 年 MM 月 dd 日"   value-format="yyyy-MM-dd" class="input-w-220"></el-date-picker>
                  </el-form-item>
                  <el-form-item label=" 结束时间：" :label-width="formLabelWidth">
                          <el-date-picker  v-model="form.endTime"   type="date"   :placeholder="form.endTime"  format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"  class="input-w-220"></el-date-picker>
                  </el-form-item>
                   <el-form-item :label-width="formLabelWidth" label="合作期限：">
                      <el-input v-model="form.member" :placeholder="form.member" class="input-w-480"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="目前进展：">
                      <el-input type="textarea" :rows="3" v-model="form.memberIds" :placeholder="form.memberIds" class="input-w-480"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="项目位置：">
                      <el-input v-model="form.place" :placeholder="form.place" class="input-w-480"></el-input>
                    </el-form-item>
                      <el-form-item label="坐标:" :label-width="formLabelWidth">
                          <el-form-item label=" 经度：">
                              <el-input v-model="form.longitude" :placeholder="form.longitude"  class="input-w-220"></el-input>
                          </el-form-item>
                          <el-form-item label=" 纬度：">
                              <el-input v-model="form.latitude" :placeholder="form.latitude"  class="input-w-220"></el-input>
                          </el-form-item>
                      </el-form-item>
                      </el-form>
                  <div slot="footer" class="">
                      <el-button @click="projectEdit = false">取消</el-button>
                      <el-button type="primary" @click="submitProjectEdit">确定</el-button>
                  </div>
          </el-dialog>
        </div>

          <el-dialog title="导入数据" :visible.sync="importDataDialog" :modal="false">
            <el-form :model="importDataFrom">
              <el-form-item :label-width="formLabelWidth" >
               <el-upload
                class="upload-demo"
                ref="upload"
                :before-upload="beforeAvatarUpload"
                drag
                name="files"
                :limit="limit"
                :action="upUrl"
                
                :on-exceed="handleExceed"
                :data='pppss'
                multiple
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false"
                :on-success="submitSuccess"
                :on-progress="uploadVideoProcess"
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                 <div>暂时只支持xls，xlsx格式</div>
                 <el-progress
                      v-if="videoFlag == true"
                      type="line"
                      :percentage="videoUploadPercent"
                      style="margin-top:30px"
                    ></el-progress>
              </el-upload>
              </el-form-item>
              <el-form-item label="类型" :label-width="formLabelWidth">
                <el-select
                  v-model="nodeTypeKey"
                  clearable
                  placeholder="请选择"
                  @change="nodeselectKey"
                >
                  <el-option v-for="item in nodeType" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
             <div slot="footer" class="">
                      <el-button @click="importDataDialog = false">取消</el-button>
                      <el-button type="primary" @click="submitUpload">确定</el-button>
                  </div>
          </el-dialog>

          <el-tooltip v-if="allocationProject"  class="item projectDark" effect="dark" content="关闭" placement="bottom">
                 <i class="el-icon-circle-close close" style="z-index:10001"  @click="projectDark"></i>
            </el-tooltip>
        <allocation v-if="allocationProject" :projectId="allocation.id"></allocation>
    </section>
</template>
<script>
import allocation from "./allocation.vue";
export default {
  components: {
    allocation
  },
  data() {
    return {
      videoUploadPercent: '0%',
      videoFlag: false,
      limit: 5,
      formLabelWidth: "120px",
      projectAdd: false,
      projectEdit: false,
      breadcrumbProject: false,
      allocationProject: false,
      projectDiv: true,
      importData:false,
      importDataDialog:false,
      importDataFrom:{},
      tableData: [],
      addEventFormCancleBtn: false,
      date: "",
      id: "",
      projectname: "",
      totalRecord: 0,
      totalPage: 0,
      currentPage: 1,
      nodeType:{},
      nodeTypeKey:'',
      projectStatus: [
        { projectid: "1", projectname: "未评定状态" },
        { projectid: "2", projectname: "受控状态" },
        { projectid: "3", projectname: "告警状态" },
        { projectid: "4", projectname: "待评估状态" },
        { projectid: "5", projectname: "竣工状态" }
      ],
      projectType: [],

      userIdentity: {
        id: ""
      },
      name: "",
      id: "",
      form: {
        id: "",
        name: "",
        brief: "",
        startTime: "",
        endTime: "",
        status:"",
        member: "",  //合作期限
        memberIds:"", //目前进展
        place:"",
        longitude: "",
        latitude: "",
      },
      allocation: {
        id: "",
        name: ""
      },
      upUrl:'/api/import/manual-data',
      pppss:{},
      fileList: [],
      files: [],
    };
  },
  methods: {
    
    beforeAvatarUpload(file){
      const fileType = file.name.substring(file.name.lastIndexOf('.')+1)
      const isExcel = (fileType === 'xlsx') || (fileType === 'xls');
      
      if (!isExcel) {
          this.$confirm('导入人工数据暂时只支持xls，xlsx格式', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error' ,
            callback: action => {
             
            }
          })
      }
      else
       return isExcel;
    },

    uploadVideoProcess(event, file, fileList){  
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
    },

    submitSuccess(res,file){
      if(res.status === 200){
        this.videoFlag = false
        this.videoUploadPercent = 0;
        this.$message.success('数据导入成功')
        this.importDataDialog = false;
        this.$refs.upload.clearFiles()
      }else{
        this.$message.error(res.msg);
      }
    },

    deleteRow(index, rows) {
      this.$confirm("是否要删除?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.tableData.splice(index, 1);
          var projectId = rows.id;
          this.projectModel
            .projectDelete(projectId)
            .then(res => {
              
            })
            .catch(err => {
              console.log(err.message);
            });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.getPrjList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleEdit(index, row) {
      (this.projectEdit = true),
        (this.form.id = row.id),
        (this.form.name = row.name),
        (this.form.brief = row.brief),
        (this.form.status = row.status),
        (this.form.startTime = row.startTime),
        (this.form.endTime = row.endTime),
        (this.form.member = row.member),
        (this.form.memberIds = row.memberIds),
        (this.form.longitude = row.longitude),
        (this.form.latitude = row.latitude),
        (this.projectType.name = row.projectType.name);
        (this.form.place = row.place);
    },
    handleExceed(file) {
      if (file.length > this.limit) {
        this.$message({
            type: "warning",
            message: "一次上传的文件不能超过5个！"
          });
      } 
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },

      
    //上传文件
    submitUpload() {
      if(this.nodeTypeKey === ''){
        this.$message({
            type: "warning",
            message: "请选择类型"
          });
      }else{
        this.$refs.upload.submit();
        
        this.nodeTypeKey = ''
      }     
    },
    
    allocaTion(index, row) {
      (this.allocationProject = true),
      (this.projectDiv = false),
      (this.allocation.id = row.id),
      (this.allocation.name = row.name);
       this.pppss = {
        projectId:this.allocation.id,
        monitorTypeId:this.nodeTypeKey
      }
      
      this.importData = true
    },
    //项目编辑
    submitProjectEdit() {
      let data = {
        id: this.form.id,
        name: this.form.name,
        brief: this.form.brief,
        status: this.form.status,
        startTime: this.form.startTime,
        endTime: this.form.startTime,
        member: this.form.member,
        memberIds: this.form.memberIds,
        longitude: this.form.longitude,
        latitude: this.form.latitude,
        place: this.form.place
      };
      this.projectModel
        .projectUpdate(data)
        .then(res => {
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.projectEdit = false
            this.handleCurrentChange(event)
          } else {
            this.$message({
              type: "info",
              message: res.msg
            });
          }
        })
        .catch(err => {
          console.log(err.massage);
        });
    },

    handleCurrentChange(event) {
      var data = {
      currentPage: this.currentPage,
      pageSize: 10
    }
      this.projectModel
        .queryByUser(data)
        .then(res => {
          
          this.tableData = res.data.list;
        })
        .catch(err => {
          console.log(err.message);
        });
    },

    handlePreClick(event) {
      if (this.currentPage != 1) {
        this.currentPage--;
      }
    },

    handleNextClick(event) {
      if (this.currentPage != this.totalPage) {
        this.currentPage++;
      }
    },

    selectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.projectType.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },

    nodeselectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.nodeType.find(item => {
        return item.id === id;
        this.id = obj.id;
      });

      this.pppss = {
        projectId:this.allocation.id,
        monitorTypeId:this.nodeTypeKey
      }
    },
    //创建项目
    submitProjectAdd() {
      let data = {
        id: this.form.id,
        name: this.form.name,
        brief: this.form.brief,
        status: this.form.status,
        startTime: this.form.startTime,
        endTime: this.form.startTime,
        member: this.form.member,
        memberIds: this.form.memberIds,
        longitude: this.form.longitude,
        latitude: this.form.latitude,
        place: this.form.place
      };
      
      this.projectModel
        .projectAdd(data)
        .then(res => {
         
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.projectAdd = false
            this.getPrjList();
          } else {
            this.$message({
              type: "info",
              message: res.msg
            });
          }
        })
        .catch(err => {
          console.log(err.massage);
        });
    },
    //关闭按钮
    projectDark(){
      (this.allocationProject = false);
      (this.projectDiv = true);
      (this.importData = false);
    },

    importDataButton() {
      (this.importDataDialog = true);
    },
    getPrjList(){
      var data = {
      currentPage: 1,
      pageSize: 10
    }
    this.projectModel
      .queryByUser(data)
      .then(res => {
        this.totalRecord = res.data.totalRecord;
        this.totalPage = res.data.totalPage;
        this.tableData = res.data.list;
      })
      .catch(err => {
        console.log(err.message);
      });
    }
  },
  mounted() {
    var data = {
      currentPage: 1,
      pageSize: 10
    }
    this.projectModel
      .queryByUser(data)
      .then(res => {
        this.totalRecord = res.data.totalRecord;
        this.totalPage = res.data.totalPage;
        this.tableData = res.data.list;
      })
      .catch(err => {
        console.log(err.message);
      });

    this.projectModel
      .projectType()
      .then(res => {
        this.projectType = res.data;
      })
      .catch(err => {
        console.log(err.message);
      });

      var data = {
        type: "base"
      }
      this.projectModel
      .monitorContentBase(data)
      .then(res => {
        this.nodeType = res.data;
      })
      .catch(err => {
        console.log(err.message);
      });
  }
};
</script>

<style scoped>

.content {
  padding-top: 10px;
  overflow-y: auto;
}
.input-w-220 {
  width: 220px;
}
.breadcrumb {
  padding-left: 10px;
  height: 27px;
  border-bottom: 1px solid #dfdbdb;
  margin-bottom: 5px;
}
.projectDark{
  margin-top: 40px
}
.userinfo{
  float:right;
  margin-top: -17px;
}
.userinfoButton{
  height: 40px;
}
</style>
